<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-customized-bar-cylinder',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'pictorialBar'
    }
  },

  computed: {
    option () {
      let vm = this
      let xAxisData = []
      let seriesData1 = []

      vm.data.forEach(item => {
        xAxisData.push(item.name)
        seriesData1.push(item.value)
      })

      return {
        xAxis: {
          data: xAxisData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 25,
            align: 'center',
            textStyle: {
              fontSize: this.labelFontSize,
              color: this.labelColor,
            }
          },
          interval: 0
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [{
          name: '柱顶部',
          type: 'pictorialBar',
          symbolSize: [this.barWidth, 10],
          symbolOffset: [0, -5],
          z: 12,
          itemStyle: {
            normal: {
                color: function(params) {
                    return vm.colors[2 * params.dataIndex + 1]
                }
            }
          },
          label: {
            show: true,
            position: 'top',
            fontSize: 16
          },
          symbolPosition: 'end',
          data: seriesData1,
        }, {
          name: '柱底部',
          type: 'pictorialBar',
          symbolSize: [this.barWidth, 10],
          symbolOffset: [0, 5],
          z: 12,
          itemStyle: {
            normal: {
              color: function (params) {
                return vm.colors[2 * params.dataIndex]
              }
            }
          },
          data: seriesData1
        },
        {
          name: '第一圈',
          type: 'pictorialBar',
          symbolSize: [57, 16],
          symbolOffset: [0, 11],
          z: 11,
          itemStyle: {
            normal: {
              color: 'transparent',
              borderColor: this.quancolors[0],
              borderWidth: 2
            }
          },
          data: seriesData1
        },
        {
          name: '第二圈',
          type: 'pictorialBar',
          symbolSize: [82, 22],
          symbolOffset: [0, 17],
          z: 10,
          itemStyle: {
            normal: {
              // color: 'transparent',
              // borderColor: barTopColor[0],
              // borderWidth: 2
              color: 'transparent',
              borderColor: this.quancolors[1],
              borderType: 'dashed',
              borderWidth: 2
            }
          },
          data: seriesData1
        }, {
          type: 'bar',
          itemStyle: {
            normal: {
              color: function(params) {
                return new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 1,
                      color: vm.colors[2 * params.dataIndex]
                    },
                    {
                      offset: 0,
                      color: vm.colors[2 * params.dataIndex + 1]
                    }
                  ]
                );
              },
              opacity: 0.8
            }
          },
          z: 16,
          silent: true,
          barWidth: this.barWidth,
          barGap: '-100%', // Make series be overlap
          data: seriesData1
        }]
      }
    }
  },

  methods: {
    setSeries () {

    }
  },

  watch: {
    innerRadius () {
      this.setSeries()
    },
    outerRadius () {
      this.setSeries()
    },

    showLabel () {
      this.setSeries()
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
